<!doctype html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>博客管理</title>

    <!-- Bootstrap -->
    <link rel="stylesheet" href="/static/bootstrap/css/bootstrap.css" />
    <style>
      header{
        height:50px;
        line-height:50px;
        padding:0 10px;
        background:rgb(32,52,62);
        color:white;
      }

      header span{
        font-size:20px;
      }

      header a{
        float:right;
        color:#fff;
      }

      footer{
        position:fixed;
        bottom:0;
        left:0;
        right:0;
        height:30px;
        line-height:30px;
        border-top:1px solid #ccc;
        padding:0 10px;
      }
      sidebar{
        width:300px;
        border-right:1px solid #ccc;
        left:0px;
        top:50px;
        bottom:30px;
        position:fixed;
        background:rgb(32,52,62);
      }
      #main{
        left:300px;
        right:00px;
        top:50px;
        bottom:30px;
        position:fixed;
        padding:10px;
      }
      .s-title{
        height:50px;
        background:rgb(12,32,42);
        padding:0 10px;
        color:#fff;
        line-height:50px;
        font-size:16px;
      }

      .op-bar{
        margin-bottom:10px;
      }
    </style>
  </head>
  <body>
    <header>
      <span>1901/1902的博客</span>
      <a href="">注销</a>
    </header>
    <sidebar>
      <div class="s-title">
        管理菜单
      </div>
      <ul class="nav nav-pills nav-stacked">
        <li role="presentation" class="active"><a href="#">Home</a></li>
        <li role="presentation"><a href="#">Profile</a></li>
        <li role="presentation"><a href="#">Messages</a></li>
      </ul>
    </sidebar>
    <div id="main">
      <div class="container-fluid">
        <div class="row">
          <div class="op-bar">
          <a href="" class="btn btn-primary">添加</a>
          </div>
          <table class="table table-bordered table-striped table-hover">
            <thead>
              <tr>
                <th>操作</th>
                <th>序号</th>
                <th>标题</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td><a class="btn btn-sm btn-warning" href="">修改</a> <a class="btn btn-sm btn-danger" href="">删除</a></td>
                <td>1</td>
                <td>这是标题</td>
              </tr>
              <tr>
                <td><a class="btn btn-sm btn-warning" href="">修改</a> <a class="btn btn-sm btn-danger" href="">删除</a></td>
                <td>1</td>
                <td>这是标题</td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>

    <footer>
      版权所有 copyright © 2021-2022 李宏
    </footer>
    <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
    <script src="/static/js/jquery-2.1.4.min.js"></script>
    <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
    <script src="/static/bootstrap/js/bootstrap.min.js"></script>
  </body>
</html>